<template>
  <div class="map-div" :style="{ height: divHeight + 'px', width: divWidth}">
    <div id="about" class="about">
    
    </div>
  </div>
  
</template>
<script>
export default {
  name: "about-map",
  data () {
    return {
      divHeight: window.innerHeight - 70,
      divWidth: document.body.clientWidth,
      tk: '9aa421bfac4b31f0ad91a7118973689d',
      map: null,
      control: null,
      leftTOP: 'T_ANCHOR_TOP_LEFT',
      rightTOP: 'T_ANCHOR_TOP_RIGHT',
      leftBOTTOM: 'T_ANCHOR_BOTTOM_LEFT',
      rightBOTTOM: 'T_ANCHOR_BOTTOM_RIGHT',
    };
  },
  methods: {
    // 初始化地图，加载图层
    initMap () {
      var zoom = 6;
      var imageURL = "http://t0.tianditu.gov.cn/ter_w/wmts?" +
         "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + 
         "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + this.tk;
      // 创建自定义图层对象
      var lyr = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18})
      var config = {layers: [lyr]};
      //初始化地图对象
      this.map = new T.Map("about", config);
      //设置显示地图的中心点和级别
      this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
      //允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom();
      //创建缩放平移控件对象
      this.control = new T.Control.Zoom();
      this.controlsetPosition('rightBOTTOM');
      //添加缩放平移控件
      this.map.addControl(this.control);
    },
    controlsetPosition (controlPositionStr) {
      var controlPosition;
      if (controlPositionStr == "leftTOP")
          controlPosition = T_ANCHOR_TOP_LEFT;
      else if (controlPositionStr == "rightTOP")
          controlPosition = T_ANCHOR_TOP_RIGHT;
      else if (controlPositionStr == "leftBOTTOM")
          controlPosition = T_ANCHOR_BOTTOM_LEFT;
      else if (controlPositionStr == "rightBOTTOM")
          controlPosition = T_ANCHOR_BOTTOM_RIGHT;
      this.control.setPosition(controlPosition);
    },
    computeHeight () {
      let that = this;
      window.onresize = () => {
        return ( () => {
          that.divHeight = window.innerHeight - 70;
          that.divWidth = document.body.clientWidth;
        })();
      }
     
    }
  },
  mounted () {
    this.initMap();
    this.computeHeight();
  },
  computed: {
    mapDivSize () {
      return {
        divHeight: this.divHeight,
        divWidth: this.divWidth
      }
    }
  },
  watch: {
    mapDivSize () {
      this.computeHeight();
    }
  }
}
</script>
<style lang="scss" scoped>
.map-div {
  position: relative;
}

#about {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
